<template>
	<div class="dashboard-container">
		<!-- 第一区域：今日数据 -->
		<div class="today-data-section">
			<div class="section-header">
				<h2><el-icon>
						<DataLine />
					</el-icon> 今日数据</h2>
				<span class="date">{{ currentDate }}</span>
			</div>
			<el-row :gutter="20">
				<el-col :span="6">
					<el-card shadow="hover" class="data-card revenue-card">
						<div class="card-content">
							<div class="data-value">¥12,568</div>
							<div class="data-title">营业额</div>
							<div class="data-trend">
								<el-icon color="#52c41a">
									<Top />
								</el-icon>
								<span>12% 较昨日</span>
							</div>
							<div class="card-icon">
								<el-icon>
									<Money />
								</el-icon>
							</div>
						</div>
					</el-card>
				</el-col>
				<el-col :span="6">
					<el-card shadow="hover" class="data-card orders-card">
						<div class="card-content">
							<div class="data-value">86</div>
							<div class="data-title">有效订单</div>
							<div class="data-trend">
								<el-icon color="#52c41a">
									<Top />
								</el-icon>
								<span>8% 较昨日</span>
							</div>
							<div class="card-icon">
								<el-icon>
									<List />
								</el-icon>
							</div>
						</div>
					</el-card>
				</el-col>
				<el-col :span="6">
					<el-card shadow="hover" class="data-card rate-card">
						<div class="card-content">
							<div class="data-value">92%</div>
							<div class="data-title">订单完成率</div>
							<div class="data-trend">
								<el-icon color="#52c41a">
									<Top />
								</el-icon>
								<span>3% 较昨日</span>
							</div>
							<div class="card-icon">
								<el-icon>
									<Finished />
								</el-icon>
							</div>
						</div>
					</el-card>
				</el-col>
				<el-col :span="6">
					<el-card shadow="hover" class="data-card users-card">
						<div class="card-content">
							<div class="data-value">24</div>
							<div class="data-title">新增用户</div>
							<div class="data-trend">
								<el-icon color="#f5222d">
									<Bottom />
								</el-icon>
								<span>5% 较昨日</span>
							</div>
							<div class="card-icon">
								<el-icon>
									<User />
								</el-icon>
							</div>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</div>

		<!-- 第二区域：订单管理 - 优化后 -->
		<div class="order-manage-section">
			<div class="section-header">
				<h2><el-icon>
						<SetUp />
					</el-icon> 订单管理</h2>
				<div class="order-filter">
					<el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
						end-placeholder="结束日期" size="small" />
					<el-button type="primary" size="small" :icon="Refresh" @click="refreshOrders">刷新</el-button>
				</div>
			</div>
			<div class="order-cards-container">
				<el-card shadow="hover" class="order-card pending-card">
					<div class="order-content">
						<div class="order-value">12</div>
						<div class="order-title">待接单</div>
						<div class="order-icon">
							<el-icon>
								<Clock />
							</el-icon>
						</div>
						<div class="order-footer">较昨日 <span class="up">↑8%</span></div>
					</div>
				</el-card>
				<el-card shadow="hover" class="order-card delivery-card">
					<div class="order-content">
						<div class="order-value">8</div>
						<div class="order-title">待派送</div>
						<div class="order-icon">
							<el-icon>
								<Van />
							</el-icon>
						</div>
						<div class="order-footer">较昨日 <span class="up">↑5%</span></div>
					</div>
				</el-card>
				<el-card shadow="hover" class="order-card delivering-card">
					<div class="order-content">
						<div class="order-value">15</div>
						<div class="order-title">配送中</div>
						<div class="order-icon">
							<el-icon>
								<Bicycle />
							</el-icon>
						</div>
						<div class="order-footer">较昨日 <span class="down">↓3%</span></div>
					</div>
				</el-card>
				<el-card shadow="hover" class="order-card completed-card">
					<div class="order-content">
						<div class="order-value">56</div>
						<div class="order-title">已完成</div>
						<div class="order-icon">
							<el-icon>
								<CircleCheck />
							</el-icon>
						</div>
						<div class="order-footer">较昨日 <span class="up">↑12%</span></div>
					</div>
				</el-card>
				<el-card shadow="hover" class="order-card canceled-card">
					<div class="order-content">
						<div class="order-value">4</div>
						<div class="order-title">已取消</div>
						<div class="order-icon">
							<el-icon>
								<CircleClose />
							</el-icon>
						</div>
						<div class="order-footer">较昨日 <span class="down">↓2%</span></div>
					</div>
				</el-card>
				<el-card shadow="hover" class="order-card total-card">
					<div class="order-content">
						<div class="order-value">80</div>
						<div class="order-title">全部订单</div>
						<div class="order-icon">
							<el-icon>
								<Document />
							</el-icon>
						</div>
						<div class="order-footer">较昨日 <span class="up">↑7%</span></div>
					</div>
				</el-card>
			</div>
		</div>

		<!-- 第三区域：订单信息表格 -->
		<div class="order-table-section">
			<div class="section-header">
				<h2><el-icon>
						<Tickets />
					</el-icon> 订单信息</h2>
			</div>
			<el-card shadow="hover" class="table-card">
				<el-table :data="orderData" style="width: 100%" border stripe
					:header-cell-style="{background: '#f0f7ff', color: '#333'}">
					<el-table-column prop="orderId" label="订单号" width="180" />
					<el-table-column prop="dishes" label="订单菜品" width="220">
						<template #default="{ row }">
							<div class="dish-list">
								<div v-for="(dish, index) in row.dishes" :key="index" class="dish-item">
									<el-tag size="small" effect="plain" type="info">{{ dish.name }} ×
										{{ dish.quantity }}</el-tag>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="address" label="地址" width="200" />
					<el-table-column prop="estimatedTime" label="预计送达时间" width="180" />
					<el-table-column prop="amount" label="实收金额" width="120">
						<template #default="{ row }">
							<span class="amount-text">¥{{ row.amount }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="remark" label="备注">
						<template #default="{ row }">
							<span v-if="row.remark" class="remark-text">{{ row.remark }}</span>
							<span v-else class="no-remark">无</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="200" fixed="right">
						<template #default="{ row }">
							<el-button type="primary" size="small" @click="handleAccept(row)" plain>
								<el-icon>
									<Check />
								</el-icon>接单
							</el-button>
							<el-button type="danger" size="small" @click="handleReject(row)" plain>
								<el-icon>
									<Close />
								</el-icon>拒单
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="pagination-container">
					<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="totalOrders"
						:page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper" background />
				</div>
			</el-card>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue'
	import {
		Top, Bottom, DataLine, Money, List, Finished, User,
		SetUp, Clock, Van, CircleCheck, CircleClose, Document,
		Tickets, Check, Close
	} from '@element-plus/icons-vue'

	// 当前日期
	const currentDate = computed(() => {
		const now = new Date()
		return `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`
	})

	// 订单数据
	const orderData = ref([
		{
			orderId: 'ORD20230501001',
			dishes: [
				{ name: '红烧肉', quantity: 1 },
				{ name: '清蒸鱼', quantity: 1 },
				{ name: '米饭', quantity: 2 }
			],
			address: '北京市海淀区中关村大街1号',
			estimatedTime: '12:30',
			amount: '128.00',
			remark: '不要放香菜'
		},
		{
			orderId: 'ORD20230501002',
			dishes: [
				{ name: '宫保鸡丁', quantity: 1 },
				{ name: '麻婆豆腐', quantity: 1 },
				{ name: '米饭', quantity: 3 }
			],
			address: '北京市朝阳区建国路88号',
			estimatedTime: '12:45',
			amount: '86.00',
			remark: '微辣'
		},
		{
			orderId: 'ORD20230501003',
			dishes: [
				{ name: '水煮鱼', quantity: 1 },
				{ name: '夫妻肺片', quantity: 1 },
				{ name: '米饭', quantity: 4 }
			],
			address: '北京市西城区西长安街1号',
			estimatedTime: '13:00',
			amount: '156.00',
			remark: '加急'
		},
		{
			orderId: 'ORD20230501004',
			dishes: [
				{ name: '回锅肉', quantity: 1 },
				{ name: '酸辣汤', quantity: 1 },
				{ name: '米饭', quantity: 2 }
			],
			address: '北京市东城区东长安街1号',
			estimatedTime: '13:15',
			amount: '98.00',
			remark: ''
		},
		{
			orderId: 'ORD20230501005',
			dishes: [
				{ name: '鱼香肉丝', quantity: 1 },
				{ name: '干煸豆角', quantity: 1 },
				{ name: '米饭', quantity: 2 }
			],
			address: '北京市丰台区丰台路1号',
			estimatedTime: '13:30',
			amount: '78.00',
			remark: '少油少盐'
		}
	])

	// 新增图标导入
	import { Bicycle, Refresh } from '@element-plus/icons-vue'
	import { ElMessage } from 'element-plus'

	// 新增日期范围选择
	const dateRange = ref([])

	// 刷新订单数据
	const refreshOrders = () => {
		ElMessage.success('订单数据已刷新')
		// 这里可以添加实际的刷新逻辑
	}

	// 分页相关
	const currentPage = ref(1)
	const pageSize = ref(10)
	const totalOrders = ref(80)

	// 接单操作
	const handleAccept = (row) => {
		ElMessage.success(`已接单: ${row.orderId}`)
	}

	// 拒单操作
	const handleReject = (row) => {
		ElMessage.warning(`已拒单: ${row.orderId}`)
	}
</script>

<style scoped>
	.dashboard-container {
		padding: 20px;
		background-color: #f5f7fa;
	}

	.section-header {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.section-header h2 {
		margin: 0;
		font-size: 18px;
		color: #333;
		display: flex;
		align-items: center;
	}

	.section-header h2 .el-icon {
		margin-right: 8px;
		color: #409eff;
	}

	.section-header .date {
		margin-left: 15px;
		font-size: 14px;
		color: #666;
		background-color: #f0f7ff;
		padding: 4px 8px;
		border-radius: 4px;
	}

	/* 今日数据卡片样式 */
	.data-card {
		margin-bottom: 20px;
		border-radius: 8px;
		border-top: 4px solid transparent;
		position: relative;
		overflow: hidden;
		transition: all 0.3s;
	}

	.data-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
	}

	.card-content {
		padding: 20px;
		text-align: center;
		position: relative;
	}

	.data-value {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 10px;
		color: #333;
	}

	.data-title {
		font-size: 14px;
		color: #666;
		margin-bottom: 10px;
	}

	.data-trend {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
	}

	.data-trend .el-icon {
		margin-right: 5px;
	}

	.card-icon {
		position: absolute;
		right: 20px;
		top: 20px;
		font-size: 40px;
		opacity: 0.2;
		color: inherit;
	}

	/* 不同数据卡片颜色 */
	.revenue-card {
		border-top-color: #36a2eb;
		background: linear-gradient(135deg, #f6faff 0%, #e6f3ff 100%);
	}

	.revenue-card .data-value {
		color: #36a2eb;
	}

	.revenue-card .card-icon {
		color: #36a2eb;
	}

	.orders-card {
		border-top-color: #ff6384;
		background: linear-gradient(135deg, #fff6f8 0%, #ffeff2 100%);
	}

	.orders-card .data-value {
		color: #ff6384;
	}

	.orders-card .card-icon {
		color: #ff6384;
	}

	.rate-card {
		border-top-color: #4bc0c0;
		background: linear-gradient(135deg, #f6fffb 0%, #e6fff5 100%);
	}

	.rate-card .data-value {
		color: #4bc0c0;
	}

	.rate-card .card-icon {
		color: #4bc0c0;
	}

	.users-card {
		border-top-color: #ffa040;
		background: linear-gradient(135deg, #fff9f0 0%, #fff2e6 100%);
	}

	.users-card .data-value {
		color: #ffa040;
	}

	.users-card .card-icon {
		color: #ffa040;
	}

	/* 订单管理卡片样式 */
	.order-card {
		margin-bottom: 20px;
		border-radius: 8px;
		transition: all 0.3s;
		position: relative;
		overflow: hidden;
	}

	.order-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}

	.order-content {
		padding: 15px;
		text-align: center;
	}

	.order-value {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.order-title {
		font-size: 14px;
		margin-bottom: 5px;
	}

	.order-icon {
		font-size: 24px;
		margin-top: 10px;
	}

	/* 不同订单卡片颜色 */
	.pending-card {
		background: linear-gradient(135deg, #f0f7ff 0%, #e0efff 100%);
		border-left: 4px solid #409eff;
	}

	.pending-card .order-value {
		color: #409eff;
	}

	.pending-card .order-icon {
		color: #409eff;
	}

	.delivery-card {
		background: linear-gradient(135deg, #f0f9ff 0%, #e0f2ff 100%);
		border-left: 4px solid #36a2eb;
	}

	.delivery-card .order-value {
		color: #36a2eb;
	}

	.delivery-card .order-icon {
		color: #36a2eb;
	}

	.completed-card {
		background: linear-gradient(135deg, #f6ffed 0%, #e6ffd8 100%);
		border-left: 4px solid #67c23a;
	}

	.completed-card .order-value {
		color: #67c23a;
	}

	.completed-card .order-icon {
		color: #67c23a;
	}

	.canceled-card {
		background: linear-gradient(135deg, #fff2f0 0%, #ffe6e6 100%);
		border-left: 4px solid #f56c6c;
	}

	.canceled-card .order-value {
		color: #f56c6c;
	}

	.canceled-card .order-icon {
		color: #f56c6c;
	}

	.total-card {
		background: linear-gradient(135deg, #f9f0ff 0%, #f0e6ff 100%);
		border-left: 4px solid #9254de;
	}

	.total-card .order-value {
		color: #9254de;
	}

	.total-card .order-icon {
		color: #9254de;
	}

	/* 订单表格区域 */
	.order-table-section {
		margin-top: 30px;
	}

	.table-card {
		border-radius: 8px;
	}

	.amount-text {
		color: #ff7d00;
		font-weight: bold;
	}

	.remark-text {
		color: #666;
		font-size: 13px;
	}

	.no-remark {
		color: #999;
		font-style: italic;
		font-size: 13px;
	}

	.dish-list {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.dish-item {
		margin: 2px 0;
	}

	.pagination-container {
		margin-top: 20px;
		display: flex;
		justify-content: flex-end;
	}

	.order-manage-section {
		margin-top: 30px;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	.order-filter {
		display: flex;
		gap: 10px;
		align-items: center;
	}

	.order-cards-container {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		gap: 15px;
	}

	.order-card {
		border-radius: 8px;
		transition: all 0.3s;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.order-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}

	.order-content {
		padding: 15px;
		text-align: center;
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.order-value {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.order-title {
		font-size: 14px;
		margin-bottom: 10px;
		color: #666;
	}

	.order-icon {
		font-size: 30px;
		margin: 10px 0;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.order-footer {
		font-size: 12px;
		color: #999;
	}

	.order-footer .up {
		color: #67c23a;
	}

	.order-footer .down {
		color: #f56c6c;
	}

	/* 调整卡片颜色 */
	.pending-card {
		border-left: 4px solid #409eff;
		background: linear-gradient(135deg, #f0f7ff 0%, #e0efff 100%);
	}

	.pending-card .order-value,
	.pending-card .order-icon {
		color: #409eff;
	}

	.delivery-card {
		border-left: 4px solid #36a2eb;
		background: linear-gradient(135deg, #f0f9ff 0%, #e0f2ff 100%);
	}

	.delivery-card .order-value,
	.delivery-card .order-icon {
		color: #36a2eb;
	}

	.delivering-card {
		border-left: 4px solid #9254de;
		background: linear-gradient(135deg, #f9f0ff 0%, #f0e6ff 100%);
	}

	.delivering-card .order-value,
	.delivering-card .order-icon {
		color: #9254de;
	}

	.completed-card {
		border-left: 4px solid #67c23a;
		background: linear-gradient(135deg, #f6ffed 0%, #e6ffd8 100%);
	}

	.completed-card .order-value,
	.completed-card .order-icon {
		color: #67c23a;
	}

	.canceled-card {
		border-left: 4px solid #f56c6c;
		background: linear-gradient(135deg, #fff2f0 0%, #ffe6e6 100%);
	}

	.canceled-card .order-value,
	.canceled-card .order-icon {
		color: #f56c6c;
	}

	.total-card {
		border-left: 4px solid #ffa040;
		background: linear-gradient(135deg, #fff9f0 0%, #fff2e6 100%);
	}

	.total-card .order-value,
	.total-card .order-icon {
		color: #ffa040;
	}

	/* 响应式调整 */
	@media (max-width: 1600px) {
		.order-cards-container {
			grid-template-columns: repeat(3, 1fr);
		}
	}

	@media (max-width: 1200px) {
		.order-cards-container {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (max-width: 768px) {
		.order-cards-container {
			grid-template-columns: 1fr;
		}

		.section-header {
			flex-direction: column;
			align-items: flex-start;
			gap: 10px;
		}

		.order-filter {
			width: 100%;
		}
	}
</style>